﻿<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>编辑居民区地理位置</title>
    <style type="text/css">
        .field_label
        {
            width:50px;
            float:left;
            text-align:right;
        }
        .field_input
        {
            width:150px;
            float:left;
            text-align:left;
        }
        .field_input input
        {
            width:100px;
        }
        .field
        {
           clear:both;
           margin:5px 0px 5px 0px;
        }
        .map_canvas
        {
            width:500px;
            height:500px;
        } 
    </style>
    <script src="js/jquery-1.4.1.js" type="text/javascript"></script>
    <script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=true"></script>
</head>
<body>
    <form  method="post">
        <div >
            <div class="field">
                <div class="field_label">
                    Name:
                </div>
                <div class="field_input">
                    <input type="text" id="NameInput" value=""/>
                </div>
            </div>
            <div class="field">
                <div class="field_label">
                    Lat:
                </div>
                <div class="field_input">
                    <input type="text" id="LatInput" value=""/>
                </div>
            </div>
            <div class="field">
                <div class="field_label">
                    Lng:
                </div>
                <div class="field_input">
                    <input type="text" id="LngInput" value=""/>
                </div>
            </div>
            <div class="field">
                <div class="field_label">
                    <input  type="submit" value="save"/>
                </div>
                <div class="field_input"> 
                </div>
            </div>
        </div>
        <div class="mapdiv">            
            <div id="map_canvas" class="map_canvas" style=" clear:both;"></div>
        </div>
        <script type="text/javascript">
            $(document).ready(function () {
                var mapOptions = {
                    zoom: 9,
                    minZoom: 9,
                    maxZoom: 20,
                    center: new google.maps.LatLng(39.90555, 116.39147),
                    mapTypeId: google.maps.MapTypeId.ROADMAP,
                    mapTypeControl: false,
                    zoomControlOptions: { style: google.maps.ZoomControlStyle.DEFAULT }
                }
                var map = new google.maps.Map($('.map_canvas').get(0), mapOptions);
                var marker = null;
                google.maps.event.addListener(map, 'click', function (e) {
                    var latlng = e.latLng;
                    if (marker) {
                        marker.setMap(null);
                    }
                    marker = new google.maps.Marker({
                        position: latlng,
                        map: map
                    });
                    $('#LatInput').attr('value', latlng.lat());
                    $('#LngInput').attr('value', latlng.lng());
                })
            });
        </script>
    </form>
</body>
</html>
